<template>
  <d2-container>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <div class="d2-breadcrumb">
        <el-breadcrumb-item>编辑企业</el-breadcrumb-item>
      </div>
    </el-breadcrumb>
    <el-form
      label-width="100px"
      :model="query"
      :rules="rules"
      ref="add"
      label-position="top"
    >
      <!-- card 1 -->
      <el-card>
        <div class="title-box">基本信息</div>
        <!-- row 1 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="企业名称"
              prop="name"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.name"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="统一社会信用代码"
              prop="creditCode"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.creditCode"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="法定代表人姓名"
              prop="legalPerson"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.legalPerson"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 2 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="运营人姓名"
              prop="operateName"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.operateName"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="运营人联系方式"
              prop="operatePhone"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
              maxlength="11"
                placeholder="请输入"
                type="text"
                v-model.trim="query.operatePhone"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="企业联系方式"
              prop="phone"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-input
              maxlength="11"
                placeholder="请输入"
                type="text"
                v-model.trim="query.phone"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 3 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="营业执照" prop="licenseImage">
              <img-upload
                tip="建议:图片小于1M"
                v-model="query._licenseImage"
                :limit="1"
                listType="picture-card"
              ></img-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法人身份证人像面" prop="cardPhotoJust">
              <img-upload
                tip="建议:图片小于1M"
                v-model="query._cardPhotoJust"
                :limit="1"
                listType="picture-card"
              ></img-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法人身份证国徽面" prop="cardPhotoBack">
              <img-upload
                tip="建议:图片小于1M"
                v-model="query._cardPhotoBack"
                :limit="1"
                listType="picture-card"
              ></img-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!-- card 2 -->
      <el-card style="margin: 20px 0">
        <div class="title-box">
          关联主账号
          <el-button
            type="text"
            class="add-btn"
            @click="query._userIdList.push('')"
            >新增</el-button
          >
        </div>
        <!-- row 1 -->
        <div class="card-box">
          <el-form-item
            :label="index == 0 ? '关联主账号' : '关联副账号'"
            class="item-box"
            v-for="(item, index) in query._userIdList"
            :key="index"
          >
            <el-button
              type="text"
              class="item-delete"
              @click="removeRelevance(index)"
              >删除</el-button
            >
            <el-select
              v-model="query._userIdList[index]"
              placeholder="请选择"
              style="width: 80%"
            >
              <el-option
                :label="item.nickName"
                :value="item.id"
                v-for="(item, index) in userList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-card>
      <el-card style="margin: 20px 0">
        <div class="title-box">关联园区</div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="园区"
              prop="gardenId"
              :rules="[{ required: true, message: '字段不能为空' }]"
            >
              <el-select v-model="query.gardenId" placeholder="请选择">
                <el-option
                  :label="item.gardenName"
                  :value="item.id"
                  v-for="(item, index) in gardenList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="园区名称" prop="gardenName" :rules="[
      { required: true, message: '字段不能为空'}
    ]">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.gardenName"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <div class="flex-center">
          <el-button type="primary" @click="add">保存</el-button>
        </div>
      </el-card>
    </el-form>
  </d2-container>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      id: this.$route.params.id,
      query: {
        _userIdList: [""],
        relevance: [""],
      },
      rules: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        time: [{ required: true, message: "日期不能为空", trigger: "blur" }],
        content: [{ required: true, message: "内容不能为空", trigger: "blur" }],
      },
      userList: [],
      gardenList: [],
    };
  },
  methods: {
    //删除
    removeRelevance(index) {
      this.query.relevance.splice(index, 1);
    },
    add() {
      this.$refs["add"].validate((valid) => {
        if (valid) {
          let params = {
            ...this.query,
            userId: this.query._userIdList[0],
          };
          if (this.query._userIdList.length > 1) {
            let arr = this.query._userIdList;
            arr = arr.splice(1, arr.length - 1);
            console.log("截取数组", arr);
            params.wxUserIds = arr.join(",");
          }
          if (this.query._licenseImage && this.query._licenseImage.length > 0) {
            params.licenseImage = this.query._licenseImage[0].url;
          }
          if (
            this.query._cardPhotoJust &&
            this.query._cardPhotoJust.length > 0
          ) {
            params.cardPhotoJust = this.query._cardPhotoJust[0].url;
          }
          if (
            this.query._cardPhotoBack &&
            this.query._cardPhotoBack.length > 0
          ) {
            params.cardPhotoBack = this.query._cardPhotoBack[0].url;
          }
          console.log("提交内容：", params);

          this.$axios.post("/wxEnterprise/update", params).then((result) => {
            console.log("响应", result);
            if (result.data == 1) {
              this.$message.success("操作成功");
              this.$router.push("/company");
              this.$refs["add"].resetFields();
            } else {
              this.$message.error(result.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    getInfo() {
      this.$axios
        .post("/wxEnterprise/getInfo", { id: this.id })
        .then((result) => {
          if (result) {
            let arr = [result.data.userId];
            if (result.data.wxUserIds && result.data.wxUserIds.length > 1) {
              let ids = result.data.wxUserIds.split(",");
              arr = arr.concat(ids);
              arr = arr.map((ele) => {
                return ele * 1;
              });
            }

            this.query = {
              ...result.data,
              _userIdList: arr,
              _licenseImage: [{ url: result.data.licenseImage }],
              _cardPhotoJust: [{ url: result.data.cardPhotoJust }],
              _cardPhotoBack: [{ url: result.data.cardPhotoBack }],
            };
          } else {
            this.$message.error(result.data.msg);
          }
        });
    },
    //获取用户列表
    getUserList() {
      let params = {
        pageNum: 1,
        pageSize: 9999999,
      };

      this.$axios.post("/wxUser/list", params).then((result) => {
        if (result) {
          this.userList = result.data.list;
        } else {
          this.$message.error(result.data.msg);
        }
      });
    },
    //获取园区列表
    getGardenList() {
      let params = {
        pageNum: 1,
        pageSize: 9999999,
         shelfStatus:1
      };

      this.$axios.post("/wxGarden/list", params).then((result) => {
        if (result) {
          this.gardenList = result.data.list;
        } else {
          this.$message.error(result.data.msg);
        }
      });
    },
  },
  mounted() {
    this.getInfo();
    this.getUserList();
    this.getGardenList();
  },
};
</script>

<style scoped lang="scss">
.item-box {
  position: relative;
  width: 30%;
  .item-delete {
    position: absolute;
    right: 80px;
    top: -45px;
  }
}
.card-box {
  display: flex;
  flex-wrap: wrap;
}
</style>
